<template>
  <div class="discount-code">
    <popup  :isShow.sync="showBillPop"
            title="开具发票"
            @confirm="confirm"
            @cancel="cancel">
      <template slot="content">
        <section class="drallBill-select">
              <section class="drallBill_type">
                  <h4>税点类型</h4>
                  <div class="bill-btn-box">
                    <van-button :class="['bill-btn',taxType!=1?'active':'']" color="#F21228" hairline round plain @click="changeTaxType(1)">需要(税点:{{resData.buy_tax_invoice}}%)</van-button>
                    <van-button :class="['bill-btn',taxType!=0?'active':'']" color="#F21228" hairline round plain @click="changeTaxType(0)">不需要</van-button>
                  </div>
              </section>
              <section class="drallBill_type" v-if="showBillType">
                  <h4>发票类型</h4>
                  <div class="bill-btn-box">
                    <van-button :class="['bill-btn',billType!=2?'active':'']" v-if="resData.paper_invoice_enable==1" color="#F21228" hairline round plain @click="changeBillType(2)">纸质发票</van-button>
                    <van-button :class="['bill-btn',billType!=3?'active':'']" v-if="resData.vat_invoice_enable==1" color="#F21228" hairline round plain @click="changeBillType(3)">增值税发票</van-button>
                    <van-button :class="['bill-btn',billType!=4?'active':'']" v-if="resData.electronic_invoice_enable==1" color="#F21228" hairline round plain @click="changeBillType(4)">电子发票</van-button>
                  </div>
              </section>
              <div class="bill_message" v-show="showBillType&&billType==2">
                <h4>发票信息</h4>
                <section class="bill_box">
                  <section class="fp_title">抬头类型</section>
                  <section class="fp_con">
                    <van-radio-group 
                        v-model="invoice_type" 
                        icon-size="16" 
                        color="#CCCCCC" 
                        checked-color="#F20B22" 
                        direction="horizontal" 
                        @change="changeRiseType">
                      <div class="radio-box">
                        <van-radio name="1">个人</van-radio>
                        <van-radio name="2">公司</van-radio>
                      </div>
                    </van-radio-group>
                  </section>
                </section>
                <section class="bill_box">
                    <section class="fp_title">发票抬头</section>
                    <section class="fp_con">
                        <input type="text" v-model="enterpriseName" placeholder="请输入发票抬头" @change="getLocalEnterprise">
                    </section>
                </section>
                <section class="bill_box" v-show="showRiseType">
                    <section class="fp_title">企业税号</section>
                    <section class="fp_con">
                        <input type="text" v-model="uncid" placeholder="请输入纳税人识别号">
                    </section>
                </section>
              </div>
              <div class="bill_message" v-show="showBillType&&billType==3">
                  <h4>发票信息</h4>
                  <section class="bill_box">
                      <section class="fp_title">单位名称</section>
                      <section class="fp_con">
                          <input type="text" v-model="enterpriseName" placeholder="请输入单位名称" @change="getLocalEnterprise">
                      </section>
                  </section>
                  <section class="bill_box">
                      <section class="fp_title">企业税号</section>
                      <section class="fp_con">
                          <input type="text" v-model="uncid" placeholder="请输入纳税人识别号">
                      </section>
                  </section>
                  <section class="bill_box">
                      <section class="fp_title">单位地址</section>
                      <section class="fp_con">
                          <input type="text" v-model="oploc" placeholder="请输入单位地址">
                      </section>
                  </section>
                  <section class="bill_box">
                      <section class="fp_title">单位电话</section>
                      <section class="fp_con">
                          <input type="text" v-model="company_phone" placeholder="请输入单位电话">
                      </section>
                  </section>
                  <section class="bill_box">
                      <section class="fp_title">开户银行</section>
                      <section class="fp_con">
                          <input type="text" v-model="open_bank" placeholder="请输入开户银行">
                      </section>
                  </section>
                  <section class="bill_box">
                      <section class="fp_title">银行账户</section>
                      <section class="fp_con">
                          <input type="text" v-model="bank_account" placeholder="请输入银行账户">
                      </section>
                  </section>
              </div>
              <div class="bill_message" v-show="showBillType&&billType==4">
                  <h4>发票信息</h4>
                  <section class="bill_box">
                      <section class="fp_title">抬头类型</section>
                        <section class="fp_con">
                        <van-radio-group 
                            v-model="invoice_type" 
                            icon-size="16" 
                            color="#CCCCCC" 
                            checked-color="#F20B22" 
                            direction="horizontal" 
                            @change="changeRiseType">
                          <div class="radio-box">
                            <van-radio name="1">个人</van-radio>
                            <van-radio name="2">公司</van-radio>
                          </div>
                        </van-radio-group>
                      </section>
                  </section>
                  <section class="bill_box">
                      <section class="fp_title">发票抬头</section>
                      <section class="fp_con">
                          <input type="text" v-model="enterpriseName" placeholder="请输入发票抬头">
                      </section>
                  </section>
                  <section class="bill_box bill_identify" v-show="showRiseType">
                      <section class="fp_title">企业税号</section>
                      <section class="fp_con">
                          <input type="text" v-model="uncid" placeholder="请输入纳税人识别号">
                      </section>
                  </section>
              
                  <section class="bill_box" v-if="resData.need_fp_mail">
                      <section class="fp_title">邮箱</section>
                      <section class="fp_con">
                          <input type="text" v-model="mail" placeholder="请输入邮箱">
                      </section>
                  </section>
      
              </div>
            </section>
      </template>
    </popup>
    <enterprise-name  ref="enterpriseName"
                      :isEnterpriseName.sync="isEnterpriseName"
                      :enterpriseName="enterpriseName"
                      @TicketInfo="TicketInfo"></enterprise-name>
  </div>
</template>

<script>
import Vue from 'vue'
import popup from '@/components/popup'
import enterpriseName from '../enterpriseName/index.vue'

export default Vue.extend({
  components: {
    popup,
    enterpriseName
  },
  props: {
    resData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      showBillPop: false,
      billType: 2,
      taxType: 0,
      showBillType: false,
      showRiseType: false,

      invoice_type: '1', // 个人 1 公司 2
      enterpriseName: '', // 发票抬头
      uncid: '', // 企业税号
      oploc: '', // 单位地址
      company_phone: '', // 单位电话
      open_bank: '', // 开户银行
      bank_account: '', // 银行账户
      mail: '', // 邮箱

      isEnterpriseName: false // 企业税点弹层
    }
  },
  watch:{
    resData(val) {
      if (val.last_time_invoice_info) {
        this.taxType = 1
        this.changeTaxType(1)
        const invoice_info = val.last_time_invoice_info
        this.invoice_type = invoice_info.invoice_type
        this.changeRiseType()
        if (invoice_info.is_electronic == 1 && val.electronic_invoice_enable == 1) {
          // 电子发票
          this.changeBillType(4)
          this.billType = 4
          this.mail = invoice_info.mail
          this.enterpriseName = invoice_info.invoice_header
          this.uncid = invoice_info.invoice_no
        } else {
          if (invoice_info.type == 1 && val.paper_invoice_enable == 1) {
            // 纸质
            this.changeBillType(2)
            this.billType = 2
            this.enterpriseName = invoice_info.invoice_header
            this.uncid = invoice_info.invoice_no
          } else if (invoice_info.type == 2 && val.vat_invoice_enable == 1) {
            // 增值税
            this.changeBillType(3)
            this.billType = 3
            this.enterpriseName = invoice_info.invoice_header
            this.uncid = invoice_info.invoice_no
            this.oploc = invoice_info.company_address
            this.company_phone = invoice_info.company_phone
            this.open_bank = invoice_info.open_bank
            this.bank_account = invoice_info.bank_account
          } else {
            this.taxType = 0
            this.changeTaxType(0)
          }
        }
      }
    }
  },
  methods: {
    // 发票抬头类型
    changeRiseType() {
      if (this.invoice_type == 2) {
        this.showRiseType = true
      } else {
        this.showRiseType = false
      }
    },
    // 是否开发票
    changeTaxType(type) {
      this.taxType = type
      if (type != 0) {
        this.showBillType = true
        if (this.resData.paper_invoice_enable == 1) {
          this.billType = 2
        } else if (this.resData.vat_invoice_enable == 1) {
          this.billType = 3
        } else if (this.resData.electronic_invoice_enable == 1) {
          this.billType = 4
        }
      } else {
        this.showBillType = false
      }
    },
    // 发票类型
    changeBillType(type) {
      this.billType = type
      this.clearData()
    },
    // 还原数据
    clearData() {
      this.invoice_type = '1'
      this.showRiseType = false
      this.enterpriseName = ''
      this.uncid = ''
      this.oploc = ''
      this.company_phone = ''
    },
    TicketInfo(data) {
      if (data.items) {
        this.uncid = data.items.uncid
        this.enterpriseName = data.items.entname
        this.oploc = data.items.oploc
      }
    },
    getLocalEnterprise() {
      if ((this.enterpriseName && this.invoice_type == 2) || (this.enterpriseName && this.billType == 3)) {
        this.isEnterpriseName = true
        this.$refs.enterpriseName.getLocalEnterprise()
      }
    },

    confirm() {
      this.$parent.formData.invoice_type = this.invoice_type
      this.$parent.formData.invoice_no = this.uncid
      if (this.taxType == 0) {
        this.$parent.formData.is_invoice_type = 1
        this.$parent.invoiceInfo = '不开发票'
      } else {
        this.$parent.formData.invoice_header = this.enterpriseName
        this.$parent.formData.is_invoice_type = this.billType
        if (this.billType == 2) {
          this.$parent.invoiceInfo = '纸质发票'
        }
        if (this.billType == 3) {
          this.$parent.formData.company_address = this.oploc
          this.$parent.formData.company_phone = this.company_phone
          this.$parent.formData.open_bank = this.open_bank
          this.$parent.formData.bank_account = this.bank_account
          this.$parent.invoiceInfo = '增值税发票'
        }
        if (this.billType == 4) {
          this.$parent.formData.mail = this.mail
          this.$parent.invoiceInfo = '电子发票'
        }
      }
    },
    cancel() {

    }
  }
})
</script>

<style lang="scss">
.drallBill-select{
  padding: 30px;
  min-height: 500px;
  h4{
    font-size: 28px;
    font-weight: bold;
    line-height: 40px;
  }
  .drallBill_type{
   
  }
  .bill-btn-box{
     padding: 20px 0;
    .bill-btn{
      height: 68px;
      padding: 0 30px;
      font-size: 26px;
      margin-right:30px;
      background: #FFF2F4;
      &.active{
        background: #F7F7F7 !important;
        border-color: #F7F7F7 !important;
        color: #333 !important;
      }
    }
  }
  .bill_message{
    .bill_box{
      height: 96px;
      border-bottom: 1px solid #EDEDED;
      display: flex;
      .fp_title{
        width: 200px;
        font-size: 28px;
        line-height: 96px;
        padding-left: 20px;
        box-sizing: border-box;
      }
      .fp_con{
        flex: 1;
        input{
          display: block;
          height: 94px;
          width: 100%;
          padding: 25px 0;
          background: transparent;
        }
        .radio-box{
          height: 94px;
          display: flex;
          align-items: center;
          .van-radio{
            margin-right: 30px;
          }
        }
      }
      &:last-child{
        border-bottom: 0;
      }
    }
  }
}
</style>